<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" itemscope="" itemtype="http://schema.org/Article" lang="en">
<head>
    <title>GISMETEO.RU: Создание снежинки </title>
    <script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>

    <script type="text/javascript" src="/js/jq1.7.js"></script>
     <script type="text/javascript" src="/js/bind.js"></script>
    <script type="text/javascript">
		$(function() {
			
			
			
			var historyLine = function() {
				
				this.countSectionPositionMas = function(){
					t.sectionPositionMas = t.year.map(function(){return parseInt($(this).css('left'))});
					
				};
				
				this.show = function(){
					
					this.year.each(function(){
						var curEl = $(this);

						if(((curEl.index()+1)%3)){
							
							if((curEl.index()%3)){
								curEl.css({'padding-top': (t.mainConteiner.height()/3 - t.year.height()/3) + 'px'})
							}
						
						}else{
							
								curEl.css({'padding-top': (t.mainConteiner.height()/4 + t.mainConteiner.height()/4) + 'px'})
						}
						
						curEl.css({
							'left': (curEl.index()*(curEl.width()+10)) + 'px'
						})
						
					});
					
					t.countSectionPositionMas();
					
				};
				
				this.action = function(){
					
					
				};
				
				this.actionOver = function(){
					
					var parent = $(this).parent();
					var next = $(this).next();
					
					next.show().css({
						'top': parent.css('padding-top')
					});
					
					var indexWidthBox = 0,	indexHeightBox = 0;
					function moving(){
						
						
						
						indexWidthBox = (indexWidthBox < t.widthBox) ? indexWidthBox+2 : t.widthBox;
						indexHeightBox = (indexHeightBox < t.heightBox) ? indexHeightBox+1 : t.heightBox;
						
						next.css({
							'width': indexWidthBox +'px',
							'height': indexHeightBox +'px'
						});
						
					
					
						parent.prevAll().each(function(){
							
							var thisEl = $(this);

							thisEl.css({
								'left': (t.sectionPositionMas[thisEl.index()] - 1) +'px'
							});
						});
					
					
						t.countSectionPositionMas();
						
						
						if ((indexWidthBox == t.widthBox) || t.actionOutExist) {
							
							clearInterval(keySetIntervalMoving);
							
							if( t.actionOutExist) {t.actionOut();	t.actionOutExist = 0;}
						
							next.css({
								'font-size': 12 + 'px',
								'text-indent': 0 + 'px'
								
							});
						}
					}
					
					var keySetIntervalMoving = setInterval(moving, 10);
					
					
					t.action();
					
				};
				
				this.actionOut = function(){
					
					this.actionOutExist = 1;
					var parent = $(this).parent();
					var next = $(this);
				
					
					var indexWidthBox = t.widthBox,	indexHeightBox = t.heightBox;

					next.css({
							'font-size': 0 + 'px',
							'text-indent': -1000 + 'px'
							
					});

					function movingOut(){
					
						indexWidthBox = (indexWidthBox > 0) ? indexWidthBox-2 : 0;
						indexHeightBox = (indexHeightBox > 0) ? indexHeightBox-1 : 0;
						
					//	console.log(indexWidthBox);
						
						
						next.css({
							'width': indexWidthBox +'px',
							'height': indexHeightBox +'px'
						});
						
					
					
						parent.prevAll().each(function(){
							
							var thisEl = $(this);

							thisEl.css({
								'left': (t.sectionPositionMas[thisEl.index()] + 1) +'px'
							});
						});
					
					
						t.countSectionPositionMas();
						
						
						if (indexWidthBox == 0) {
							
							clearInterval(keySetIntervalMovingOut);
						
							next.hide();
							
						}
					}
					
					var keySetIntervalMovingOut = setInterval(movingOut, 10);
					
					t.action();
				
				};
				var t = this
				this._init = function(id){
					this.mainConteiner = $(id);
					this.year = t.mainConteiner.find("section");
					this.activeEl = [];
					this.sectionPositionMas = [];
					this.widthBox = 150;
					this.heightBox = 50;
					this.actionOutExist = 0;
					this.show();
					


					this.year.find("span").bind("mouseenter", t.actionOver);
					this.year.find("div").bind("mouseleave", t.actionOut);
					
				}
			}
			
			
			historyLine = new historyLine();
			historyLine._init("#y1");
			
			
			
			
		/*	
		
			
			function parentHumster (lap){
				
				
				this.lap = 4;
				
				
				
			}
			parentHumster.prototype.fruits = []
			parentHumster.prototype.eat = function(fruit){
				
				return	this.fruits.push(fruit)
			};
			parentHumster.prototype.sss = 3;
			
			x1 = new parentHumster()
			x1.eat("apple");
			
			x2  = new parentHumster()
			x2.eat("banana");
			
			console.log(x1.fruits)
			console.log(x2.fruits)
			
			
			
			
			function humster (lap){
				this.superclass(lap)
			
				this.a = 3;
			
				this.fruit =0 ;
				
				
			
			}
			
			humster.prototype.eat = function(){
					
						
					
				
						
			};
				*/
				
				
			/*humster.prototype = new parentHumster();
			humster.prototype.constructor = humster;
			humster.prototype.superclass = parentHumster
			
			
			
			
			
			humster1 = new humster(4);
			console.log(humster1);
			humster1.eat("orange")
			
			console.log(humster1.hasOwnProperty("fruits"))
			console.log(humster1.fruit)
			
			humster2 = new humster()
			humster2.eat("apple");
			console.log(humster2.fruits)
			
			
			hh = new parentHumster()
			hh.eat("melon")*/
			
			
		//	extend(humster,parentHumster)
			
		//	xx.prototype = new yy();            // Hook up A into B's prototype chain
			//xx.prototype.constructor = xx;
			
		/*	parentHumster1 = new yy()
			parentHumster2 = new yy()
			*/
		
			
			
			
			
/*			humster2.prototype.xx = function(){
			return 6
			}*/
			
			/*humster1.eat("melon");
			
			humster2.eat("apple");*/
			
			
			//console.log(humster1.xx())
			
			
		/*	
			parentHumster1.eat("water melon")
			
			parentHumster2.eat("hum")
			
			
			
			
			
console.log(Object.fruits)

console.log(humster2.fruits)

console.log(parentHumster1.fruits)
console.log(parentHumster2.fruits)
			
			*/
			
			



			
			HistoryGallery.data = [
					{
						year : '1847', 					
						yearEvent : 'Свою назву торгова марка BOND STREET отримала на честь однієї із вулиць Лондона'
					},
					{
						year : '1902', 
						yearEvent : 'До кола її шанувальників належав і сам король Великобританії Альберт'
					},
					{
						year : '1976', 
						yearEvent : 'BOND STREET знову з’являється на європейських теренах – спершу у Італії та Німеччині, а трохи згодом – й у рідній Великобританії.'
					},
					{
						year : '1994', 
						yearEvent : 'Українська історія BOND STREET бере початок із 1994 року, коли сигарети цієї марки, тоді ще – у м’якій пачці, вперше почали офіційно ввозити з-за кордону.'
					},
					{
						year : '1996', 
						yearEvent : 'Виробництво BOND STREET на Харківській тютюновій фабриці розпочалося у 1996 році, а вже через рік нові сигарети BOND STREET отримали оновлену тверду пачку.'
					},
					{
						year : '1999', 
						yearEvent : 'У 1999 році марка завдяки швидким темпам росту стала лідером продажів у своєму ціновому сегменті. А, крім того, цей рік є датою запуску першого розширення продуктового ряду BOND STREET: на світ з’явилися сигарети BOND STREET Lights.'
					},
					{
						year : '2002', 
						yearEvent : 'У 2002 році з’явився ще один смаковий варіант сигарет – BOND STREET Superlights. '
					},
					{
						year : '2007', 
						yearEvent : 'З січня 1997 року до січня 1998-го – популярність марки зросла втричі (!), і відтоді – продовжує збільшуватися. '
					},
					{
						year : '2009', 
						yearEvent : 'Виробництво продукції компанії відбувалося на тютюновій фабриці Fabriques de Tabacs Réunies (Південна Африка).'
					},
					{
						year : '1847', 					
						yearEvent : 'Свою назву торгова марка BOND STREET отримала на честь однієї із вулиць Лондона'
					},
					{
						year : '1902', 
						yearEvent : 'До кола її шанувальників належав і сам король Великобританії Альберт'
					},
					{
						year : '1976', 
						yearEvent : 'BOND STREET знову з’являється на європейських теренах – спершу у Італії та Німеччині, а трохи згодом – й у рідній Великобританії.'
					},
					{
						year : '1994', 
						yearEvent : 'Українська історія BOND STREET бере початок із 1994 року, коли сигарети цієї марки, тоді ще – у м’якій пачці, вперше почали офіційно ввозити з-за кордону.'
					},
					{
						year : '1996', 
						yearEvent : 'Виробництво BOND STREET на Харківській тютюновій фабриці розпочалося у 1996 році, а вже через рік нові сигарети BOND STREET отримали оновлену тверду пачку.'
					},
					{
						year : '1999', 
						yearEvent : 'У 1999 році марка завдяки швидким темпам росту стала лідером продажів у своєму ціновому сегменті. А, крім того, цей рік є датою запуску першого розширення продуктового ряду BOND STREET: на світ з’явилися сигарети BOND STREET Lights.'
					},
					{
						year : '2002', 
						yearEvent : 'У 2002 році з’явився ще один смаковий варіант сигарет – BOND STREET Superlights. '
					},
					{
						year : '2007', 
						yearEvent : 'З січня 1997 року до січня 1998-го – популярність марки зросла втричі (!), і відтоді – продовжує збільшуватися. '
					},
					{
						year : '2009', 
						yearEvent : 'Виробництво продукції компанії відбувалося на тютюновій фабриці Fabriques de Tabacs Réunies (Південна Африка).'
					}
					
				];
			
			
			
			
			function Year(obj, left,top){

				if(!obj) return false;

				var that = this;
			
				this.obj = obj;
				this.index = obj.index();
				
				this.startLeft = left;
				this.startTop = top;
				
				this.left = left;
				this.top = top;
				
				this.maxWidth = 200;
				this.maxHeight = 100;
				
				this.$span = this.obj.find("span");
				this.$div = this.obj.find("div");
				
				this.position();
		
			
				this.$div.css({
					'font-size' : '1px',
					width: '0px',
					height: '0px',
					
					top : this.top + 'px'
				});
				
				this.motion();
							
			}
						Year.prototype.motion  = function(){
						
								this.$span.bind("mouseover", this.hoverOver.bind(this));
								this.$div.bind("mouseleave", this.hoverOut.bind(this));
				
						}
							
		
							Year.prototype.position  = function(){
						
								this.obj.css({
									left: this.left + 'px',
									'padding-top': this.top + 'px'
								});
				
							}
							
							
							
							Year.prototype.hoverOver = function(){
					
								var	HistoryGallerySections1 = HistoryGallery.sections.slice(0,this.obj.index());
								var HistoryGallerySections2 =  HistoryGallery.sections.slice(this.obj.index()+1, HistoryGallery.sections.length);
				
								var that = this,
									endWidth = 0, 
									endHeight = 0;
								
								this.$div.css({
									display: 'block',
									'font-size' : '12px',
									'text-indent' : '0px'
								});
								
								var keyTime = setInterval(function(){
								
										$.each(HistoryGallerySections1, function(){
												//console.log(this.obj)
												this.left = (this.left >= (this.startLeft - this.maxWidth)) ?  this.left-5 : this.left;
												this.obj.css({
													'left' : this.left + 'px'
												})
														
										})
									
										$.each(HistoryGallerySections2, function(){
											this.left = (this.left >= (this.startLeft + (this.maxWidth/3))) ?  this.left : this.left+5;
											this.obj.css({
												'left' : this.left + 'px'
											})
						
										})
										
										endWidth = (endWidth == that.maxWidth) ?  endWidth : endWidth+5;
										endHeight = (endHeight == that.maxHeight) ? endHeight : endHeight+5;
										
										that.$div.css({
											width : endWidth + 'px',
											height : endHeight + 'px'
										})
										
										if (endWidth == that.maxWidth){clearInterval(keyTime)}
										
								},1)
							}
							
				
				
							Year.prototype.hoverOut = function(){
								
								var	HistoryGallerySections1 = HistoryGallery.sections.slice(0,this.obj.index());
								var HistoryGallerySections2 =  HistoryGallery.sections.slice(this.obj.index()+1, HistoryGallery.sections.length);
								
									var that = this,
									endWidth = this.maxWidth, 
									endHeight = this.maxHeight;
								
								this.$div.css({
										'font-size' :  '1px',
										'text-indent' : '-1000px'
								})
								
								var keyTimeOut = setInterval(function(){
								
										$.each(HistoryGallerySections1, function(){
												
											this.left = (this.left >= this.startLeft) ?  this.startLeft : this.left+5;
											this.obj.css({
												'left' : this.left + 'px'
											})
										})
									
										$.each(HistoryGallerySections2, function(){
											this.left = (this.left <= this.startLeft) ?  this.startLeft : this.left-5;
											this.obj.css({
												'left' : this.left + 'px'
											})
						
										})
										
										endWidth = (endWidth == 0) ?  endWidth : endWidth-5;
										endHeight = (endHeight == 0) ? endHeight : endHeight-5;
										
										that.$div.css({
											width : endWidth + 'px',
											height : endHeight + 'px'
										})
										
										if (endWidth <= 0){
											that.$div.css({
												display: 'none'
											})
											clearInterval(keyTimeOut)
										}
										
								},1)
								
							}
			
			
			
			
			
			function YearVisokos(obj, left, top){
				
				YearVisokos.baseConstructor.call(this, obj, left, top);
				//this.obj = obj;

				/**/
				var that = this;
				
				this.maxWidth = 350;
				this.maxHeight = 50;
				
				this.$span.css({
					background: '#000'	
				})
				
				this.$div.css({
					'background' : '#54f4ff',
					'color': '#000'
				})

				
		
				
			}

			extend(YearVisokos, Year)
			

			/*
			YearVisokos.prototype.hoverOver = function(){
				//	console.log("eee");
			};
			YearVisokos.prototype.hoverOut = function(){
			//	console.log("yyaaa");
			};
			*/

			
			
			function extend (subClass, baseClass) {
			   function inheritance() {}
			   inheritance.prototype = baseClass.prototype;
		
			   subClass.prototype = new inheritance();
			   subClass.prototype.constructor = subClass;
			   subClass.baseConstructor = baseClass;
			   subClass.superClass = baseClass.prototype;
			}

			
		
			
			
			
			function HistoryGallery(id){
				this.$year = $(id);
				
				this.show();
			}
			
			
			
			HistoryGallery.prototype.show = function(){
				var str = "";
				
				$.each(HistoryGallery.data, function(){
					str += '<section>'+
								'<span>' + this.year + '</span>' +
								'<div>' + this.yearEvent + '</div>' +
							'</section>'
				})
				
				this.$year.append('<div>' + str	+ '</div>');
				
				this.$section = this.$year.find("section");
				
				
				
				
				var widthSections = this.$section.width()*this.$section.length;
				var widthHole = this.$year.width();
				var heightHole = this.$year.height()-70;
				
				var startPositionX =  (widthHole - widthSections)/2;
				var stepPositionX = this.$section.width();
				var positionX = startPositionX;
				
				
				var stepPositionY = this.$section.height() + 5;
				
				var startPositionY = parseInt(this.$section.css('padding-top'));
				var positionY = startPositionY;
				
				HistoryGallery.sections = [];

				
				for(var i=0; i < this.$section.length; i++){

					if(i == 10) {
						HistoryGallery.sections.push(new YearVisokos($(this.$section[i]), positionX, positionY));
					}else{
						HistoryGallery.sections.push(new Year($(this.$section[i]), positionX, positionY));
					}
					
					
					
					
					
					positionX += stepPositionX;

				
					positionY = (positionY > heightHole)? startPositionY : positionY += stepPositionY;
					
				}
				
				
			//	console.log(HistoryGallery.sections)
				
				
				
			}
			
			new HistoryGallery("#y2")
			
			
			
			
			
			
			
			
				function x1(w, x){
					this.width = w;
					this.height= x;
				
				  
				}
				  x1.prototype.zz = function(){
					console.log("1")
				  }
				
				function x2(s, a, w, x){
					x1.call(this, w, x)
					this.s= s;
					this.a= a;
				}
				x2.prototype = new x1();
				x2.prototype.constructor = x2;
				
				
				 x2.prototype.zz = function(){
						console.log("2")
				}
							
					
				
				
				cc = new x2(1,2);
				
				cc.zz()
			
		})
		
		
		
		
		
		    // define the Person Class  
    function Person() {}  
      
	
		Person.prototype.sayHello = function(){  
		  console.log ('hello');  
		};  
      
    // define the Student class  
    function Student() {  
      // Call the parent constructor  
      Person.call(this);  
    }  
      
    // inherit Person  
		Student.prototype = new Person();  
		  
		// correct the constructor pointer because it points to Person  
		Student.prototype.constructor = Student;  
       
    // replace the sayHello method  
    Student.prototype.sayHello = function(){  
      console.log('hi, I am a student');  
    }  
   
      
    var student1 = new Student();  
    student1.sayHello();  
   // student1.walk();  
//    student1.sayGoodBye();  
      

		
		
		
	
    </script>
<style type="text/css" charset="utf-8">
	.years {
		background-image: linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.16, rgb(0,26,92)),
	color-stop(0.74, rgb(66,239,245)),
	color-stop(1, rgb(37,172,245))
);

 -pie-background: linear-gradient(bottom, rgb(0,26,92) 16%, rgb(66,239,245) 74%, rgb(37,172,245) 100%);
 
		width:800px;
		height:200px;
		overflow:hidden;
		 position: relative;
		 

		 -webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
	
		behavior: url(/js/PIE.php);

}

.years div {
	position:relative}
.years section {
		float:left;
		margin-right:5px;
		padding:15px 0 0 0;
		background:url(/img/line.png) no-repeat 60px bottom;
		position:absolute;
		top:0;
		left:0;
	}

	.years section span {
		background:#9ab5c8;
		color:#fff;
		font-family:Arial, Helvetica, sans-serif;
		display:block;
		border-right:4px solid #d61920;
		font-size:20px;
		padding:5px 15px;
		-webkit-border-radius: 10px;
			-moz-border-radius: 10px; 
			border-radius: 10px;
		cursor:pointer;
		position:relative;
		behavior: url(/js/PIE.php);}

		.years section div {
			display:none;
			position:absolute;
			width:0;
			height:0;
			font-size:12px;
			top:0;
			right:0;
			color:#fff;
			background:#f00;
			padding:5px;
			text-indent:-1000px;
			overflow:hidden;
			
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px; 
			border-radius: 10px;
			behavior: url(/js/PIE.php);
			
			
			}
			
		
</style>

</head>
<body>
	
    
    <section class="years" id="y2"></section>
    <p>&nbsp;</p>

	<section class="years" id="y1">
    	<section>
        	<span>1847</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>1902</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>1976</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>1994</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>1996</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>1999</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
	    <section>
        	<span>2002</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
	    <section>
        	<span>2007</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
    	<section>
        	<span>2009</span>
            <div>
            	Запуск нового формата, популярных сигарет BondStreet
            </div>
        </section>
        
    </section>
</body>
</html>